<template>
    <div v-bind:id=id v-bind:data=data></div>
</template>
 
<script>
import echarts from "echarts";
import elementResize from "element-resize-detector"; // 尺寸监听组件
    export default {
      name: "baseEchartsAllComponent",
      data(){
          return{
            ChartLineGraph:null,
          }
      },
    //  深度监听 父组件刚开始没有值，只有图标的配置项
    //  父组件ajax请求后改变数据的值，传递过来，图标已生成，监听传过来的值的改变
    // deep:true.深度监听，确保data中子项修改也能监听到。写法参考：https://cn.vuejs.org/v2/api/#watch
    watch:{
        data:{
          handler(newvalue,oldvalue) {
            this.drawLineGraph(this.id,newvalue);
          },
        deep:true
        },
        
      },
      props:["id","data"],
      mounted() {
          this.drawLineGraph(this.id,this.data);
      },
      methods:{
        drawLineGraph(id,data){
          let _this = this;
          let myChart = document.getElementById(id)
          this.ChartLineGraph = echarts.init(myChart)
          this.ChartLineGraph.setOption(data);
          //窗口自适应
          // window.addEventListener("resize",function () {
          //   _this.ChartLineGraph.resize();
          // })
          const elementResizes = elementResize({
            strategy: "scroll", // <- 推荐监听滚动，提升性能
            callOnAdd: true, // 添加侦听器时是否应调用,默认true
          })
          // elementResizes.listenTo(myChart, function (element) {
          //   this.ChartLineGraph.resize(); // 当元素尺寸发生改变是会触发此事件，刷新图表
          // });
          elementResizes.listenTo(myChart, (ele) => {
            this.$nextTick(() => {
              // setTimeout(() =>{
                 _this.ChartLineGraph.resize();
              // },220)
            })
          });
        }
      },
      beforeDestroy() {
        if(this.ChartLineGraph){
          this.ChartLineGraph.clear();
        }
      }
    }
</script>
 
<style scoped>
 
</style>